<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-Time Clock</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 20%;
        }
        #clock {
            font-size: 2em;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>实时时间</h1>
    <div id="clock"></div>

</body>
</html>
    <script>
        const chineseWeek = ['日','一','二','三','四','五','六'];
        function updateClock() {
            const now = new Date();
            const year = now.getFullYear();
            // padStart(2, '0')是字符串对象的方法，用于在字符串前面填充字符，确保字符串长度为2，不足的部分用'0'填充
            // 所以要先把时间转化为字符串在进行填充
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            const week = now.getDay();
            // 显示中文星期几
            const chineseWeekDay = chineseWeek[week];
            document.getElementById('clock').textContent = `${year}年${month}月${day}日${hours}时${minutes}分${seconds}秒   星期${chineseWeekDay}`;
        }
        // console.log(myDate.getFullYear())

        setInterval(updateClock, 1000);
        updateClock(); // Initialize clock immediately
    </script>